<template>
  <div class='page grey-stage'>
    <top-filter :filterOptions="filterOptions" @change-filter="changeFilterValue"></top-filter>
    <scroller ref="my_scroller" style="top:44px;">
    <div class="container" :style="containerHeight">
      <section class="sales-target-section">
        <sales-target :target="target" :finishedTarget="finishedTarget"></sales-target>
      </section>
      <section class="sales-performance-section mgt-6">
        <sales-performance :business-volume="businessVolume" :totalOrderQuantity="totalOrderQuantity" :perCustomerTransaction="perCustomerTransaction"></sales-performance>
      </section>
      <section class="sales-executive mgt-6">
        <sales-executive
          :followUpall = "followUpall"
          :newThread = "newThread"
          :newClient = "newClient"
          :newAudition = "newAudition"
          :clientPercentConversion = "clientPercentConversion" >
        </sales-executive>
      </section>
    </div>
    </scroller>


    <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
    <crm-tabbar activeItem='workbench'></crm-tabbar>

  </div>

</template>
<script>
  import Vue from 'vue'
  import crmTabbar from '../components/crm-tabbar'
  import salesTarget from '../components/sales-target'
  import salesPerformance from '../components/sales-performance'
  import salesExecutive from '../components/sales-executive'
  import topFilter from '../components/top-filter'
  import crmCover from '../components/crm-cover'
  import Scroller from 'vue-scroller'

  import store from '../store'

  export default {
  data() {

    let overHeight = document.body.scrollHeight+22;

    return  {
      containerHeight : 'height:'+overHeight+'px;',
      calendar: '',
      who: '',
      target: '',
      finishedTarget: '',
      businessVolume:'',
      totalOrderQuantity:'',
      perCustomerTransaction:'',
      followUpall: '',
      newThread: '',
      newClient: '',
      newAudition: '',
      clientPercentConversion:'',

      filterOptions:[
        {
            title : '销售简报',
          class: 'txt-indent'
        },

        {
          title:'本月',
          class:'width-25 txt-center',
          value: '1',
          checked: '4',
          options: [
            {
              text : '今年',
              value : '0'
            },
            {
              text : '去年',
              value : '1'
            },
            {
              text : '本季度',
              value : '2'
            },
            {
              text : '上季度',
              value : '3'
            },
            {
              text : '本月',
              value : '4'
            },
            {
              text : '上月',
              value : '5'
            },
            {
              text : '本周',
              value : '6'
            },
            {
              text : '上月',
              value : '7'
            },
            {
              text : '今天',
              value : '8'
            },
            {
              text : '昨天',
              value : '9'
            },
          ]
        },

        {
          title:'自己',
          class:'width-25 txt-center',
          value: '1',
          checked: 'own',

          options:[{
            text : '仅自己',
            value : 'own',
          }],
        },

      ],
    }
  },
  components: {
    crmTabbar,
    salesTarget,
    salesPerformance,
    salesExecutive,
    topFilter,
    crmCover,
    Scroller
  },

  mounted() {
    this.$refs.my_scroller.resize();
    this.callJsApi('biz.navigation.setTitle',{title:'工作台'});
    this.getWorckbenchInfo();
  },

  methods: {
    refresh (iscroll) {
    console.log('refresh')
    // Refresh current data
    },

    log () {
    console.log('ee');
    },

    load (iscroll) {
    console.log('load')
    // Load new data
    },

    test () {
    console.log('test')
    },

    changeFilterValue(filterOptions){
    console.log('filterOptions', filterOptions)
    this.filterOptions = filterOptions;
    this.getWorckbenchInfo();
    },

    getWorckbenchInfo(calendar, who){
      var calendar = this.filterOptions[1].checked;
      var who = this.filterOptions[2].checked;
      var that = this;
      console.debug('who', who, calendar)

      console.log('getWorckbenchInfo', calendar, who);

      //获取工作台信息
      store.dispatch('getWorckbenchInfo', {calendar, who})

      .then(function(response){

        if(response.errcode === 0 ) {
            let res = response.data.results;

            that.target = that.totalTarget || res.target;
            that.finishedTarget = res.accomplish;

            that.businessVolume = res.order_total;
            that.totalOrderQuantity = res.order_count;
            that.perCustomerTransaction = res.order_avgprice;
            that.followUpall = res.clue_count;
            that.newThread = res.new_clue;
            that.newClient = res.new_custom;
            that.newAudition = res.new_audition;
            that.clientPercentConversion = res.custom_conversion_rate;

        } else {
          console.debug('系统出错请联系管理员!', JSON.stringify(response.data));
        }

      }).catch(function(err){
        console.log(err)
      });

      //测试数据
      // that.target = this.totalTarget;
      // that.finishedTarget = 0;
      //
      // that.businessVolume = '6000';
      // that.totalOrderQuantity = '201';
      // that.perCustomerTransaction = '20';
      // that.followUpall = "20";
      // that.newThread = "20";
      // that.newClient = "30";
      // that.newAudition = "30";
      // this.clientPercentConversion = "31";
    }
  },

  watch:{
    filterOptions(value){
      console.log(value, 'watch--filterOptions')
    }
  },

  computed:{
    isShowCover () {
    return this.$store.state.app.isShowCover
    },

    totalTarget () {
    return this.$store.state.app.target
    }
  }
  }
</script>
<style lang="less">

  @import "../less/base";

  section{
    background-color: white;
  }
</style>
